<!--
* @author wn
* @date 2022/04/25 11:00:58
* @description: 主页 左侧分类
* 最终使用的数据 = 9个分类 + 1个品牌
!-->
<template>
	<aside class="home-category" @mouseleave="categoryId = null">
		<ul class="menu">
			<li
				:class="{ active: item.id === categoryId }"
				v-for="item in menuList"
				:key="item.id"
				@mouseenter="categoryId = item.id"
			>
				<!-- 二级分类路由 -->
				<router-link :to="`/category/${item.id}`">{{ item.name }} </router-link>
				<!-- 三级级分类路由
         分类刚开始由自定义产生 没有children数据
         之后由 Layout 中API获取 才有 children数据
        -->
				<template v-if="item.children">
					<router-link
						v-for="sub in item.children"
						:key="sub.id"
						:to="`/category/sub/${sub.id}`"
					>
						{{ sub.name }}
					</router-link>
				</template>
				<!-- 骨架屏 height width bg 为 props传值 -->
				<template v-else>
					<xtx-skeleton
						height="18px"
						width="60px"
						bg="rgba(255,255,255,0.2)"
						animated
						style="margin-right: 5px"
					/>
					<xtx-skeleton height="18px" width="50px" bg="rgba(255,255,255,0.2)" />
				</template>
			</li>
		</ul>
		<!-- layer 弹出层 -->
		<section class="layer">
			<h4>
				{{ categoryId === 'brand' ? '品牌推荐' : '分类推荐' }}
				<small>根据您的购买或浏览记录推荐</small>
			</h4>
			<!-- 商品 -->
			<ul v-if="currCategory && currCategory.goods">
				<li v-for="good in currCategory.goods" :key="good.id">
					<router-link to="/">
						<img :src="good.picture" alt="" />
						<div class="info">
							<!-- 超过2行 一行  省略号 。。。 -->
							<p class="name ellipsis-2">{{ good.name }}</p>
							<p class="desc ellipsis">{{ good.desc }}</p>
							<p class="price"><i>¥</i>{{ good.price }}</p>
						</div>
					</router-link>
				</li>
			</ul>
			<!-- 品牌 -->
			<ul v-if="currCategory && currCategory.brands">
				<li class="brand" v-for="brand in currCategory.brands" :key="brand.id">
					<RouterLink to="/">
						<img :src="brand.picture" alt="" />
						<div class="info">
							<p class="place">
								<i class="iconfont icon-cart"></i>&nbsp;{{ brand.place }}
							</p>
							<p class="name ellipsis">{{ brand.name }}</p>
							<p class="desc ellipsis-2">{{ brand.desc }}</p>
						</div>
					</RouterLink>
				</li>
			</ul>
		</section>
	</aside>
</template>
<script>
import { useStore } from 'vuex'
import { reactive, computed, ref } from 'vue'
import { findBrandList } from '@/network/home'

export default {
	name: 'HomeCategory',
	setup() {
		const store = useStore()
		// 最终使用的数据 = 9个分类() + 1个品牌
		// 自定义品牌数据
		const brand = reactive({
			id: 'brand',
			name: '品牌',
			children: [{ id: 'brand-children', name: '品牌推荐' }],
			// 品牌列表
			brands: [],
		})
		// vuex 得到9个分类 每个一级分类下的子分类只有两个
		const menuList = computed(() => {
			const list = store.state.category.list.map(item => ({
				id: item.id,
				name: item.name,
				children: item.children && item.children.slice(0, 2),
				goods: item.goods,
			}))
			// 返回 新数组的长度
			list.push(brand)
			// 组装  十个分类
			return list
		})
		// 弹出层 推荐 数据
		const categoryId = ref(null)
		const currCategory = computed(() => {
			const id = categoryId.value
			if (!id) return
			return menuList.value.find(item => item.id === id)
		})
		// 弹出层 品牌 数据
		findBrandList().then(v => (brand.brands = v.result))

		return { menuList, categoryId, currCategory }
	},
}
</script>
<style scoped lang="less">
.home-category {
	width: 250px;
	height: 500px;
	background: rgba(0, 0, 0, 0.8);
	position: relative;
	z-index: 99;
	// aside hover 时 会触发 layer
	&:hover {
		.layer {
			display: block;
		}
	}
	.menu {
		li {
			height: 50px;
			padding-left: 40px;
			line-height: 50px;
			&:hover,
			&.active {
				background: @xtxColor;
			}
			a {
				margin-right: 4px;
				color: #fff;
				&:first-child {
					font-size: 16px;
				}
			}
		}
	}
	// 弹层样式
	.layer {
		display: none;
		position: absolute;
		left: 250px;
		top: 0;
		width: 990px;
		height: 500px;
		background: rgba(255, 255, 255, 0.8);
		// padding: 0 15px;
		h4 {
			font-size: 20px;
			font-weight: normal;
			line-height: 80px;
			padding: 0 15px;
			small {
				font-size: 16px;
				color: #666;
			}
		}
		ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;
			li {
				width: 310px;
				height: 120px;
				// margin-right: 15px;
				margin-bottom: 15px;
				border: 1px solid #eee;
				border-radius: 4px;
				background: #fff;
				a {
					display: flex;
					align-items: center;
					width: 100%;
					height: 100%;
					padding: 10px;
					&:hover {
						background: #e3f9f4;
					}
					img {
						width: 95px;
						height: 95px;
					}
					.info {
						width: 190px;
						padding-left: 10px;
						line-height: 24px;
						.name {
							font-size: 16px;
							color: #666;
						}
						.desc {
							color: #999;
						}
						.price {
							font-size: 22px;
							color: @priceColor;
							i {
								font-size: 16px;
							}
						}
					}
				}
			}
		}
		// 品牌的样式
		li.brand {
			height: 180px;
			a {
				align-items: flex-start;
				img {
					width: 120px;
					height: 160px;
				}
			}
			.info {
				p {
					margin-top: 8px;
				}
				.place {
					color: #999;
				}
			}
		}
	}
}
// 骨架动画   透明度的渐变
.xtx-skeleton {
	animation: fade 1s linear infinite alternate;
}
@keyframes fade {
	from {
		opacity: 0.2;
	}
	to {
		opacity: 1;
	}
}
</style>
